
<link rel="stylesheet" href="jquery/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="jquery/easyui/themes/icon.css">
<body>
<div style="width: 100%;height: 98%">
	<div>
		<label for="">布局:</label><select id="card_layout"><option value="x">横向</option><option value="y">纵向</option></select>
		</br>
		<input class="checkbox_card" value="数量" type="checkbox" /><label for="">数量</label>
		<input class="checkbox_card" value="操作人" type="checkbox" /><label for="">操作人</label>
		<input class="checkbox_card" value="特别说明" type="checkbox" /><label for="">特别说明</label>
		<div style="height:10px;"></div>
	</div>
    <table id="easyui_datagrid_source_fac" style="border:1px solid blue" >

    </table>
    <div style="width: 100%;text-align: center">
    	<input type="button" value="确定" onclick="getcarddata()"/>
    </div>
</div>


<script src="https://upload.shinehao.com.cn/20180816150739jquery-1.8.3.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180816145716jquery.easyui.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180816151727easyui-lang-zh_CN.js"></script>
<script>
var order_no = window.parent.getMyUrlQueryString(window.location.href,"order_no");
$(function(){
	$('#easyui_datagrid_source_fac').datagrid({
        url:window.parent.serverUrl+"/orderProcedureTemplate/orderMagerProcedure",
        queryParams: {
        	orderId:order_no
        },
        columns:[[
        	{field:'ck',checkbox:true},
            {field:'workshopName',title:'车间'}
        ]],
        height:"70%",
        width:"100%",
        //panelWidth:"100%",
        //panelHeight:"88%",
        //rownumbers:true,
        fitColumns:true,
        pagination:false,
        loadMsg:"加载中,请等待...",
        singleSelect:false,
        align:"center",
        //toolbar: '#easyui_datagrid_source_fac_tool',
        loadFilter: function(data){
          if(data.data.length<1){
        	  alert("当前订单查不到工序信息["+order_no+"]");
          }
          return data.data;  
        },onSelect:function(index,row){
            /* $.messager.progress({title:'请等待',msg:'<span style="color:green">数据填充中...</span>'});
        	$.ajax({
                type: 'POST',
                url: window.parent.serverUrl+"/createOrder/getOrderInfoForTemp",
                data: {"order_no":row.order_p_order_no},
                success: function(data){
                  $.messager.progress('close');
                  window.parent.basicDataFixed.order_no=row.order_p_order_no;
                  window.parent.myformUtils.formFillByAllNames("#myformsubmit",data.data);
                  window.parent.basic_index_card.destroydialog();
                }
        	}); */
        }
    });
})
function getcarddata(){
	var layout =$("#card_layout").val();
	var rows = $('#easyui_datagrid_source_fac').datagrid('getSelections');
	var max_tr_length=0;
	for(i=0;i<rows.length;i++){
		if(max_tr_length<rows[i].processList.length){
			max_tr_length=rows[i].processList.length;
		}
	}
	if(layout=="x"){
		card_layout_x(max_tr_length);
	}
	if(layout=="y"){
		card_layout_y(max_tr_length);
	}
}
function createDraggleForCard(str){
	var id="_order_card";
	
	if($(".right",parent.document).find("#draggable"+id).length>0){
		$("#right"+id,parent.document).empty();
		$("#right"+id,parent.document).append(str);
		//动态添加 同工序名称同级内容
		addGXMCData();
		//colresize
		colresizeTable()
		//colresizeTable
		window.parent.basic_index_card.colresizeTable();
		window.parent.basic_index_card.destroydialog();
		return;
	}
	$(".right",parent.document).append('<div class="draggable" id="draggable' + id + 
            //'"  style=" background:' + getRandomColor() + '">\n' +
            '"  style="border:1px solid black;background: white ;top:'+0+'">\n' +
                '            <p class="lt" style="z-index:1000"></p>\n' +
                '            <p class="wh" style="z-index:1000"></p>\n' +
                '            <p class="close" style="z-index:1000" >关闭</p>\n' +
                '            <div id="right'+id+'" style="width: 100%px;height: 100%;overflow:hide;">'+str+
                '</div>'+
				'        </div>')
	//动态添加 同工序名称同级内容
	addGXMCData();
	//colresize
	colresizeTable()
	//colresizeTable
	window.parent.basic_index_card.colresizeTable();
	window.parent.basic_index_card.destroydialog();
}
/**
 * colresizeTable
 */
function colresizeTable(){
	var layout =$("#card_layout").val();
	if(layout=="x"){
		colresizeTable_x();
	}
	if(layout=="y"){
		colresizeTable_y();
	}
	window.parent.basic_index_card.colresizeTable();
}
function colresizeTable_x(){
	var td_total = $(".template_card_table",parent.document).find("tr").eq(1).find("td").length;
	var str="<tr style='height:0px'>";
	for (var i = 0; i < td_total; i++) {
		str+="<td style='width:50px'></td>";
	}
	str+="</tr>";
	$(".template_card_table",parent.document).prepend(str);	
}
function colresizeTable_y(){}
/**
 * 增加小标题同级内容
 */
function addGXMCData(){
	var layout =$("#card_layout").val();
	if(layout=="x"){
		addGXMCData_x();
	}
	if(layout=="y"){
		addGXMCData_y();
	}
}
function addGXMCData_x(){
	var id="_order_card";
	var rows = $('#easyui_datagrid_source_fac').datagrid('getSelections');//获取datagrid选了多少车间
	//添加颜色描述
	for (var i = 0; i < rows.length; i++) {
		var colspan=$("#right"+id,parent.document).find("[workshopname='workshopName']").eq(i).attr("colspan");
		for (var j = 0; j < rows[i].colorList.length; j++) {
			//车间
			$("#right"+id,parent.document).find("[workshopname='workshopName']").eq(i).attr("colspan",parseInt(colspan)+rows[i].colorList.length);
			//工序同级别
			var del_td_index = $("#right"+id,parent.document).find("[gxmc='gxmc']").eq(i).attr("del_td_index");
			$("#right"+id,parent.document).find("[gxmc='gxmc']").eq(i).after(
					'<td style="text-align:left" class="template_card_table_td" del_td_index="'+del_td_index+'" del="x" contenteditable="true">'+rows[i].colorList[j]+'</td>'	
			)
			console.info(rows[i].colorList[j]);
			//工序内容  gxmc_content0
			$("#right"+id,parent.document).find("[gxmc='gxmc_content"+i+"']").after(
					'<td style="text-align:left" class="template_card_table_td" contenteditable="true"></td>'	
			)
		}
	}
}

function addGXMCData_y(){
	var id="_order_card";
	var rows = $('#easyui_datagrid_source_fac').datagrid('getSelections');//获取datagrid选了多少车间
	//添加颜色描述
	for (var i = 0; i < rows.length; i++) {
		var rowspan=$("#right"+id,parent.document).find("[workshopname='workshopName']").eq(i).attr("rowspan");
		for (var j = 0; j < rows[i].colorList.length; j++) {
			//车间
			$("#right"+id,parent.document).find("[workshopname='workshopName']").eq(i).attr("rowspan",parseInt(rowspan)+rows[i].colorList.length);
			//工序同级别
			var td_total = $("#right"+id,parent.document).find("[gxmc='gxmc']").eq(i).parent().find('td').length-1;
			var del_td_index = $("#right"+id,parent.document).find("[gxmc='gxmc']").eq(i).attr("del_td_index");
			var str="<tr class='template_card_table_tr'>";
			for(k=0;k<td_total;k++){
				if(k==0){//工序名称同级别
					str+="<td class='template_card_table_td' del='y' contenteditable='true' del_td_index='"+del_td_index+"'>"+rows[i].colorList[j]+"</td>"
				}else{
					str+="<td class='template_card_table_td' contenteditable='true'></td>"
				}
			}
			str+="</tr>";
			$("#right"+id,parent.document).find("[gxmc='gxmc']").eq(i).parent().after(str);
		}
	}
}
function card_layout_x(max_tr_length){
	var chk_value=["工序名称"]; //默认工序名第一个
	var chk_value_index=0;   //第二行标题下标
	$('.checkbox_card:checked').each(function(){ //获取额外选项填充
		chk_value.push($(this).val()); 
	}); 
	var rows = $('#easyui_datagrid_source_fac').datagrid('getSelections');//获取datagrid选了多少车间
	var rows_index=0;//车间下标
	var rows_index_processList_arr={};//每个车间下面的工序第几个数组 为了存储每一行的时候获取相应的工序
	var str="<table class='template_card_table'>";
	var del_td_index=0;
	//有几行
	for(i=0;i<(2+max_tr_length);i++){//最多的工序数量加上头部两行的title为总行数
		str+="<tr class='template_card_table_tr'>"
		if(i==0){//第一行 为了显示车间
			for (var k = 0; k < rows.length; k++) {
				str+="<td colspan='"+chk_value.length+"' class='template_card_table_td' contenteditable='true' workshopName='workshopName'>"+
					rows[k].workshopName
					+"</td>"
			}
			continue;
		}
		for(j=0;j<(rows.length*chk_value.length);j++){//有几列
			if(i==1){//第二行 每列显示 小标题
				if(chk_value_index==0){
					str+="<td class='template_card_table_td' contenteditable='true' gxmc='gxmc' del='x' del_td_index="+del_td_index+">"+chk_value[chk_value_index]+"</td>"
				}else{
					str+="<td class='template_card_table_td' contenteditable='true'>"+chk_value[chk_value_index]+"</td>"
				}
				chk_value_index++;
				if(chk_value_index==chk_value.length){
					chk_value_index=0;
					del_td_index++;
				}
				continue;
			}
			if(chk_value_index==0){//第三行开始第一个 为工序名称的填充数据
				//当前哪个车间哪个工序第几个
				rows_index_processList_arr[rows_index]=(!isNaN(rows_index_processList_arr[rows_index]))?parseInt(rows_index_processList_arr[rows_index])+1:0;
				//避免少一点的工序数获取的时候下标越界判断
				if(rows[rows_index].processList.length>rows_index_processList_arr[rows_index]){
					str+="<td style='text-align:left' class='template_card_table_td' contenteditable='true'  gxmc='gxmc_content"+rows_index+"'>"+rows[rows_index].processList[rows_index_processList_arr[rows_index]].processName+"</td>";
				}else{
					str+="<td class='template_card_table_td' contenteditable='true'  gxmc='gxmc_content"+rows_index+"' ></td>";
				}
				rows_index++;
				if(rows_index==rows.length)rows_index=0;
			}else{
				str+="<td class='template_card_table_td' contenteditable='true'></td>";
			}
			chk_value_index++;
			if(chk_value_index==chk_value.length)chk_value_index=0;
		}
		str+="</tr>";
	}
	str+="</table>";
	createDraggleForCard(str);
}
function card_layout_y(max_tr_length){
	var chk_value=["工序名称"]; //默认工序名第一个
	var chk_value_index=0;   //第二行标题下标
	var rows_workshopName_index=0;   //第一行车间下标
	var y_total=0;//列计数器 用于做第一列显示车间用
	$('.checkbox_card:checked').each(function(){ //获取额外选项填充
		chk_value.push($(this).val()); 
	}); 
	var rows = $('#easyui_datagrid_source_fac').datagrid('getSelections');//获取datagrid选了多少车间
	var rows_index=0;//车间下标
	var rows_index_processList_arr={};//每个车间下面的工序第几个数组 为了存储每一行的时候获取相应的工序  y 
	var rows_index_processList_index=0;
	var str="<table class='template_card_table'>";
	var del_td_index=0;
	//有几行
	for(var i=0;i<(rows.length*chk_value.length);i++){
		str+="<tr class='template_card_table_tr'>"
		for (var j = 0; j < (2+max_tr_length); j++) {//有几列
			if(j==0){//第一列显示车间
				if(i%chk_value.length==0){
					if(i%chk_value.length==0&&i!=0){console.info(i);rows_workshopName_index++};//第几行被chk_value整除 则换一个车间
					str+="<td  workshopname='workshopName' rowspan='"+chk_value.length+"' class='template_card_table_td' contenteditable='true'>"+
						rows[rows_workshopName_index].workshopName
						+"</td>";
				}
				continue;
			}
			if(j==1){//第二列 显示工序
				if(chk_value_index==0){				
					str+="<td class='template_card_table_td' contenteditable='true' gxmc='gxmc' del='y' del_td_index="+del_td_index+">"+chk_value[chk_value_index]+"</td>"
				}else{
					str+="<td class='template_card_table_td' contenteditable='true'>"+chk_value[chk_value_index]+"</td>"
				}
				chk_value_index++;
				if(chk_value_index==chk_value.length){
					chk_value_index=0;
					del_td_index++;
				}
				continue;
			}
			//第三列及以后
			if(i%chk_value.length==0){//找到那一行是  工序名称 ;0 是第一个
				if(rows_index_processList_index<rows[rows_index].processList.length){
					str+="<td class='template_card_table_td' contenteditable='true'>"+rows[rows_index].processList[rows_index_processList_index].processName+"</td>";
					rows_index_processList_index++;
				}else{
					str+="<td class='template_card_table_td' contenteditable='true'></td>";
				}
			}else{
				str+="<td class='template_card_table_td' contenteditable='true'></td>";
			}
			
		}
		//下一行
		if(i%chk_value.length==0){//每chk_value.length 读下一个rows的数据  和x形式区别  读一行一行的时候
			rows_index++;
		}
		rows_index_processList_index=0;
		str+="</tr>";
	}

	str+="</table>";
	createDraggleForCard(str);
}
</script>
</body>
